<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
<!--导航-->
<nav th:replace="admin/_fragments :: menu(3)" ></nav>
<!--导航-->
<div class="m-padded-tb-hugex">
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" th:href="@{/admin/tags/input}" class="item">新增</a>
                <a href="#" th:href="@{/admin/tags}" class="teal active item">列表</a>
            </div>
        </div>
    </div>
</div>
<!--中间内容-->
<div  class="m-padded-tb-big">
    <div class="ui container">
        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="" th:text="|提示： ${message}">提示：操作成功！</div>
        </div>
        <table class="ui compact teal table">
            <thead>
            <tr align="center">
                <th>ID</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center" th:each="tag,iterStat : ${pageInfo.list}">
                <td th:text="${iterStat.count}">1</td>
                <td th:text="${tag.name}">我的故事</td>
                <td>
                    <a href="#" th:href="@{/admin/tags/{id}/input(id=${tag.id})}" class="ui mini teal basic button">编辑</a>
                    <a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}"  onclick="return confirm('确定要删除该分类吗？三思啊! 删了可就没了！')" class="ui mini red basic button">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="6" >
                    <div class="ui inverted divided stackable grid">
                        <div class="three wide column" align="center">
                            <a class="item" th:href="@{/admin/tags(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
                        </div>

                        <div class="ten wide column" align="center">
                            <p>第 <span th:text="${pageInfo.pageNum}"></span> 页，共 <span th:text="${pageInfo.pages}"></span> 页，有 <span th:text="${pageInfo.total}"></span> 个分类</p>
                        </div>

                        <div class="three wide column" align="center">
                            <a class="item" th:href="@{/admin/tags(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
                        </div>
                    </div>
                    <div align="center">
                        <a href="#" th:href="@{/admin/tags/input}">
                            <button type="button" class="ui teal button m-mobile-wide m-margin-top"><i class="pencil icon"></i>新增</button>
                        </a>
                    </div>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<br>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer"></footer>
<!--底部footer-->
<th:block th:replace="_fragments :: script"></th:block>
<script>
    $('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    });
    $('.ui.dropdown').dropdown();

    //消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });
</script>
</body>
</html>
